<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zxx">
    <head>
        <!-- Required Meta Tags -->
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Bootstrap CSS --> 
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Animate Min CSS -->
        <link rel="stylesheet" href="css/animate.min.css">
        <!-- Flaticon CSS -->
        <link rel="stylesheet" href="fonts/flaticon.css">
        <!-- Boxicons CSS -->
        <link rel="stylesheet" href="css/boxicons.min.css">
        <!-- Magnific Popup CSS -->
        <link rel="stylesheet" href="css/magnific-popup.css">
        <!-- Owl Carousel Min CSS --> 
        <link rel="stylesheet" href="css/owl.carousel.min.css">
        <link rel="stylesheet" href="css/owl.theme.default.min.css">
        <!-- Nice Select Min CSS --> 
        <link rel="stylesheet" href="css/nice-select.min.css">
        <!-- Meanmenu CSS -->
        <link rel="stylesheet" href="css/meanmenu.css">
        <!-- Jquery Ui CSS -->
        <link rel="stylesheet" href="css/jquery-ui.css">
        <!-- Style CSS -->
        <link rel="stylesheet" href="css/style.css">
        <!-- Responsive CSS -->
        <link rel="stylesheet" href="css/responsive.css">

        <!-- Favicon -->
        <link rel="icon" type="image/png" href="img/favicon.png">

        <title>酒店预定</title>
    </head>
    <body>

        <!-- PreLoader Start -->
        <div class="preloader">
            <div class="d-table">
                <div class="d-table-cell">
                    <div class="sk-cube-area">
                        <div class="sk-cube1 sk-cube"></div>
                        <div class="sk-cube2 sk-cube"></div>
                        <div class="sk-cube4 sk-cube"></div>
                        <div class="sk-cube3 sk-cube"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- PreLoader End -->

        <!-- Start Navbar Area -->
        <div class="navbar-area">
            <!-- Menu For Mobile Device -->
            <div class="mobile-nav">
                <a href="index.html" class="logo">
                    <img src="img/logos/logo-3.png" alt="Logo">
                </a>
            </div>

            <!-- Menu For Desktop Device -->
            <div class="main-nav">
                <div class="container">
                    <nav class="navbar navbar-expand-md navbar-light ">
                        <a class="navbar-brand" href="index.html">
                            <img src="img/logos/logo-1.png" alt="Logo">
                        </a>

                        <div class="collapse navbar-collapse mean-menu" id="navbarSupportedContent">
                            <ul class="navbar-nav m-auto">
                                <li class="nav-item">
                                    <a href="index.jsp" class="nav-link active">
                                        	首页
                                        <i class='bx bx-chevron-down'></i>
                                    </a>
                                    
                                </li>
                                <li class="nav-item">
                                    <a href="${pageContext.request.contextPath}/book.action" class="nav-link">
                                        	预定
                                        <i class='bx bx-chevron-down'></i>
                                    </a>
                                    
                                </li>

                                <li class="nav-item">
                                    <a href="${pageContext.request.contextPath}/gallery.action" class="nav-link">
                                        	总览
                                        <i class='bx bx-chevron-down'></i>
                                    </a>
                                </li>

                                

                                <li class="nav-item">
                                    <a href="${pageContext.request.contextPath}/room.action" class="nav-link">
                                        	房间
                                        <i class='bx bx-chevron-down'></i>
                                    </a>
                                    
                                </li>
                                
                                
                                
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        	用户
                                    </a>
                                    
                                    <ul class="dropdown-menu">
                                        <li class="nav-item">
                                            <a href="${pageContext.request.contextPath}/sign-in.action" class="nav-link">
                                                	注册 
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a href="${pageContext.request.contextPath}/sign-up.action" class="nav-link">
                                                	登录
                                            </a>
                                        </li>
                                        
                                    </ul>
                                    
                                </li>

                                <li class="nav-item">
                                	<a href="${pageContext.request.contextPath}/person.action" class="nav-link">
                                		个人中心
                                		<i class="bx bx-chevron-down"></i>
                                	</a>
                                	
                                </li>
                            </ul>

                             <div class="nav-btn">
                                <a href="${pageContext.request.contextPath}/toadminlogin.action" class="default-btn btn-bg-one border-radius-5">后端系统</a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
       </div>
        <!-- End Navbar Area -->

        <!-- Inner Banner -->
        <div class="inner-banner inner-bg10">
            <div class="container">
                <div class="inner-title">
                    <ul>
                        <li>
                            <a href="index.jsp">首页</a>
                        </li>
                        <li><i class='bx bx-chevron-right'></i></li>
                        <li>套房详情</li>
                    </ul>
                    <h3>套房详情</h3>
                </div>
            </div>
        </div>
        <!-- Inner Banner End -->

        <!-- Room Details Area End -->
        <div class="room-details-area pt-100 pb-70">
            <div class="container">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="room-details-side">
                            <div class="side-bar-form">
                                <h3>订单</h3>
                                <form>
                                    <div class="row align-items-center">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>入住</label>
                                                <div class="input-group">
                                                    <input id="datetimepicker" type="text" class="form-control" placeholder="09/29/2020">
                                                    <span class="input-group-addon"></span>
                                                </div>
                                                <i class='bx bxs-calendar'></i>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>退房</label>
                                                <div class="input-group">
                                                    <input id="datetimepicker-check" type="text" class="form-control" placeholder="09/29/2020">
                                                    <span class="input-group-addon"></span>
                                                </div>
                                                <i class='bx bxs-calendar'></i>
                                            </div>
                                        </div>

                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>房间类型</label>
                                                <input class="form-control" name="housetype" value="åäººåºå¥æ¿" readonly="readonly">
                                                </input>	
                                            </div>
                                        </div>
                                        
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>价格</label>
                                                <input class="form-control" name="price" value="Â¥350" readonly="readonly">
                                                </input>	
                                            </div>
                                        </div>
            
                                        <div class="col-lg-12 col-md-12">
                                            <button type="submit" class="default-btn btn-bg-three border-radius-5">
                                                	立即预定
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>

                            
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div class="room-details-article">
                            <div class="room-details-slider owl-carousel owl-theme">
                                <div class="room-details-item">
                                    <img src="img/room/room-details-img1.jpg" alt="Images">
                                </div>
                                <div class="room-details-item">
                                    <img src="img/room/room-details-img2.jpg" alt="Images">
                                </div>
                                <div class="room-details-item">
                                    <img src="img/room/room-details-img3.jpg" alt="Images">
                                </div>
                            </div>

                            <div class="room-details-title">
                                <h2>双人床套房，帝级服务和超级复式感觉</h2>
                                <ul>
                                    
                                    <li>
                                       	标间 : ￥350/一晚/一间
                                    </li>

                                </ul>
                            </div>

                            <div class="room-details-content">
                                <p>
                                       房卡轻轻碰上感应锁，伴随着短短一句音乐，房门应声而开。乳白色的墙面配上原木色的实木家具，大气朴实的简中式风格映入眼帘。房间约有三十五平米左右，
                                   淡棕基调的地毯上稍微呈现几笔条纹，三米有余的层高又给房间增加了几分高级感。二米的大床上整齐的铺着雪白的床被，四个松软洁白的枕头让人有立即躺上去睡上一觉的冲动，
                                   床背墙上淡雅的远山风景画让人心旷神怡。正对着床的墙面上挂着30寸的电视，旁边的落地台灯刚好能缓解电视强光对眼睛的伤害，考虑得也是非常细致了。
                                </p>
                                <p>
                                    
    			房卡轻轻碰上感应锁，伴随着短短一句音乐，房门应声而开。乳白色的墙面配上原木色的实木家具，大气朴实的简中式风格映入眼帘。房间约有三十五平米左右，
                                   淡棕基调的地毯上稍微呈现几笔条纹，三米有余的层高又给房间增加了几分高级感。二米的大床上整齐的铺着雪白的床被，四个松软洁白的枕头让人有立即躺上去睡上一觉的冲动，
                                   床背墙上淡雅的远山风景画让人心旷神怡。正对着床的墙面上挂着30寸的电视，旁边的落地台灯刚好能缓解电视强光对眼睛的伤害，考虑得也是非常细致了。
                                </p>
                            </div>
                </div>
                </div>
            </div>
        </div>


        <!-- Jquery Min JS -->
        <script src="js/jquery-3.5.1.slim.min.js"></script>
        <!-- Popper Min JS -->
        <script src="js/popper.min.js"></script>
        <!-- Bootstrap Min JS -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Magnific Popup Min JS -->
        <script src="js/jquery.magnific-popup.min.js"></script>
        <!-- Owl Carousel Min JS -->
        <script src="js/owl.carousel.min.js"></script>
        <!-- Nice Select Min JS -->
        <script src="js/jquery.nice-select.min.js"></script>
        <!-- Wow Min JS -->
        <script src="js/wow.min.js"></script>
        <!-- Jquery Ui JS -->
        <script src="js/jquery-ui.js"></script>
        <!-- Meanmenu JS -->
        <script src="js/meanmenu.js"></script>
        <!-- Ajaxchimp Min JS -->
        <script src="js/jquery.ajaxchimp.min.js"></script>
        <!-- Form Validator Min JS -->
        <script src="js/form-validator.min.js"></script>
        <!-- Contact Form JS -->
        <script src="js/contact-form-script.js"></script>
        <!-- Custom JS -->
        <script src="js/custom.js"></script>
        
    </body>
</html>